<template>
  <panel-header :route="route"/>
  <div style="background-color: white;margin-top: 10px;">
    <el-button type="primary" size="small" style="margin: 5px;" icon="Plus" @click="open(null)">新增</el-button>
  </div>
  <el-table :data="listData.list" style="width: 100%">
    <el-table-column prop="id" label="id"/>
    <el-table-column prop="name" label="昵称"/>
    <el-table-column prop="permissionName" label="菜单权限" width="500"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="open(scope.row)">编辑</el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination-info">
    <el-pagination
        style="float:right"
        v-model:current-page="paginationData.pageNum"
        v-model:page-size="paginationData.pageSize"
        size="small"
        :background="false"
        layout="total,prev, pager, next"
        :total="listData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog :title="title"
             v-model="add"
             :before-close="beforeClose"
             width="500">
    <el-form ref="formRef" 
             :model="form" 
             :rules="rules"
             label-width="80px">
      <el-form-item v-show="false" prop="id">
        <el-input v-model="form.id" />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入权限名称"></el-input>
      </el-form-item>
      <el-form-item label="权限" prop="permissions">
        <el-tree
            ref="treeRef"
            :data="menuData"
            show-checkbox
            node-key="id"
            :default-checked-keys="[4, 5]"
            :default-expanded-keys="[2]"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="add = false;formRef=null;treeRef=null">取消</el-button>
      <el-button type="primary" @click="confirm(formRef)">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {userGetMenu,userSetMenu,menuList} from "../../../api"
import {ref,reactive,onMounted,nextTick} from "vue";
import {ElMessage} from "element-plus";
import PanelHeader from "../../../components/panelHeader.vue";
import {Plus} from "@element-plus/icons-vue";
import {useRoute} from 'vue-router'

const route = useRoute()




//列表数据
const listData = reactive({
  list:[],
  total:0
});
//控制对话框
const add = ref(false);
//控制对话框标题
const title = ref("");
const formRef = ref();
const treeRef = ref();

onMounted(()=>{
  //加载菜单数据
  userGetMenu().then(({data})=>{
    menuData.value = data.data
    console.log(data)
  })
  getListData(paginationData)
})
const menuData = ref([])
const form = reactive({
  id:0,
  name: "",
  permissions:""
});

//关闭对话框
const beforeClose = () => {
  add.value=false;
  //重置表单
  formRef.value.resetFields();
  //恢复默认选中
  treeRef.value.setCheckedKeys([4,5])
}

//表单验证
const rules = reactive({
  name:[{required: true, message: "请输入权限名称", trigger: "blur"}],
})
//新增,权限修改
const confirm = async (formEl) => {
  add.value=false;
  if(!formEl)return
  await formEl.validate((valid,fields)=>{
    if(valid){
      //获取选中的权限，转化为JSON字符串
      const permissions = JSON.stringify(treeRef.value.getCheckedKeys());
      userSetMenu({name:form.name,permissions,id:form.id}).then(({data})=>{
        if(data.code===10000){
          console.log(data)
          getListData(paginationData)
         // ElMessage.success('新增成功');
        }else{
          ElMessage.error(data.message||'新增失败');
        }
      })


    }else{
      console.log("error submit", fields);
    }
  })
}

//打开编辑弹窗
const open = (rowData={}) => {
  add.value=true
  //弹窗打开form是异步的，对弹窗进行赋值
  nextTick(()=>{
    if(rowData){
      title.value="修改"
      Object.assign(form,{id:rowData.id,name:rowData.name})
      treeRef.value.setCheckedKeys(rowData.permission)
    }else{
      title.value="新增"
    }

  })

}

//分页数据
const paginationData=reactive({
  pageNum:1,
  pageSize:10
})
//改变分页
const handleSizeChange=(val) => {
  paginationData.pageSize=val
  getListData(paginationData)
}
const handleCurrentChange=(val) => {
  paginationData.pageNum=val
  getListData(paginationData)
}

//请求列表数据
const getListData=async (params) => {
  menuList(paginationData).then(({data})=>{
    listData.list=data.data.list
    listData.total=data.data.total
  })
}



</script>
<style lang="less" scoped>
.pagination-info{
  height: 50px;
  line-height: 50px;
  padding-left:10px;
  background-color: white;
  text-align: right;
}
</style>
